<template>
  <div class="app-container">
    <el-tabs v-model="currentView" type="border-card">
      <el-tab-pane label="节目频道" name="Scheduling">
        <div :is="currentView" keep-alive />
      </el-tab-pane>
      <el-tab-pane label="插播消息" name="Cation">
        <div :is="currentView" keep-alive />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  components: {
    // 以下方式引入路由是路由的懒加载，有利于页面优化
    Scheduling: resolve => {
      require(['./scheduling.vue'], resolve)
    },
    Cation: resolve => {
      require(['./caption.vue'], resolve)
    }
  },
  data() {
    return {
      currentView: 'Scheduling' // 当前组件
    }
  }
}
</script>
<style scoped lang='scss'>
  /deep/ .el-tabs--border-card>.el-tabs__content {
    padding: 0px;
  }
</style>
